<template>
  <div>
    <div style="height: auto;max-width: 100%">
      <div style="display: flex">
        <el-input
            style="width: 250px"
            placeholder="请输入关键字"
            v-model="keyword"
            @keyup.enter="search">
        </el-input>
        <el-row>
          <el-col :span="20">
            <span class="demonstration"></span>
            <el-dropdown trigger="click">


      <span class="el-dropdown-link">
        {{ xiaoqu ? xiaoqu : "所有校区" }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="searchByCampus(null)" icon="el-icon-circle-plus">所有校区
                </el-dropdown-item>
                <el-dropdown-item @click.native="searchByCampus(scl[0])" icon="el-icon-circle-plus">{{ this.scl[0] }}
                </el-dropdown-item>
                <el-dropdown-item @click.native="searchByCampus(scl[1])" icon="el-icon-circle-plus">{{ this.scl[1] }}
                </el-dropdown-item>
                <el-dropdown-item @click.native="searchByCampus(scl[2])" icon="el-icon-circle-plus">{{ this.scl[2] }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :span="20">
            <span class="demonstration"></span>
            <el-dropdown trigger="click">
      <span class="el-dropdown-link">
       {{ xueyuan ? xueyuan : "所有学院" }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(null)">所有学院
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[0])">{{
                    this.cater[0]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[1])">{{
                    this.cater[1]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[2])">{{
                    this.cater[2]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[3])">{{
                    cater[3]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[4])">{{
                    cater[4]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[5])">{{
                    cater[5]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[6])">{{
                    cater[6]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[7])">{{
                    cater[7]
                  }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="searchByAcademy(cater[8])">{{
                    cater[8]
                  }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </div>

      <h3 class="el-icon-star-off" style="font-style: revert">商品展示</h3>
      <el-button type="success" style="margin-left: 20px" plain @click="Refreshtheitem" v-prevent-re-click="4000">
        刷新商品
      </el-button>
      <el-button v-if="this.role == '超级管理员'" type="success" style="margin-left: 20px" plain
                 @click="Approvebutton">商品审批
      </el-button>
      <el-row>
        <el-col :span="8" v-for="(item, i) in numberOfElements" :key="i" :offset="numberOfElements > 0 ? 0 : 1">
          <el-card :body-style="{ padding: '10px' }">
            <div class="square-img">
              <img :src="pageTicket[i].shopimg" class="image">
            </div>
            <div style="padding: 0px;">
              <h4>{{ pageTicket[i].shopname }}</h4>
              <span>￥：{{ pageTicket[i].price }}余：{{ pageTicket[i].quantity }}</span>
              <div style="font-size: 5px">{{ pageTicket[i].timeupdate }}</div>

              <!--操作选项-->
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">选择操作<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="showModal(pageTicket[i])">查看详情
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="editbutton(pageTicket[i])">加入我的收藏
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="putitemstatus(pageTicket[i].id)">投诉
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!--分页-->
      <el-row>
        <el-col style="text-align:right">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[9]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <!--遍历展示后端还未审批的商品-->
    <el-dialog :visible.sync="dialogVisible02" title="审批商品" width="100%">
      <div>
        <table style=" border: 1px solid #ddd;">
          <thead>
          <tr>
            <th>商家</th>
            <th>商品名称</th>
            <th>商家微信号</th>
            <th>商家手机</th>
            <th>商品照片</th>
            <th>商品描述</th>
            <th>商品上传时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in goodsList" :key="index">
            <td>{{ item.username }}</td>
            <td>{{ item.shopname }}</td>
            <td>{{ item.wxid }}</td>
            <td>{{ item.phomenumber }}</td>
            <td><img style="height: 80px" :src="item.shopimg"></td>
            <td>{{ item.shoptext }}</td>
            <td>{{ item.timeupdate }}</td>
            <td>
              <el-button type="text" @click="passshop(item)">通过</el-button>
              <el-button type="text" @click="opendismissal">驳回</el-button>
              <el-form v-if="showForm">
                <!-- 表单内容 -->
                <el-form-item label="驳回原因" prop="shopname">
                  <el-input v-model="item.remark"></el-input>
                  <el-button type="primary" @click="overruleshop(item)">确定</el-button>
                  <el-button type="primary" @click="closedismissal">取消</el-button>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deleteshop, getshopmannge, postproductinformation, putitemstatus} from "@/views/shopmanage/shopmanage";
import $axios from "@/api/http";
import {
  addCollection,
  getapproveshop,
  getshop,
  putshopdismissal,
  putshoppass, search,
  searchByAcademy,
  searchByCampus, searchKeyWord
} from "@/views/shop/shop";

export default {
  data() {
    return {
      xiaoqu: null,
      xueyuan: null,
      //学院
      cater: ["数字信息工程学院", "人文管理学院",
        "学与生物技术学院",
        "智能制造学院",
        "医护学院",
        "学前教育学院",
        "外语外贸学院",
        "小学教育学院", "艺术学院"],
      scl: ["海口校区", "旗山校区", "仓山校区"],
      showForm: false,//隐藏表单
      role: '',//获取用户角色
      goodsList: [],//接收待审批的商品
      dialogVisible02: false,
      keyword: '',//搜索框参数
      numberOfElements: '',//查询到的当前页数据数
      imgurl: '',
      total: 0,  //总数据条数
      currentpage: 1,  //当前所在页默认是第一页
      pagesize: 9,  //每页显示多少行数据 默认设置为9
      ticket: [],  //这里是从后端获取的所有数据
      pageTicket: [],//分页后的当前页数据
      //获取当前时间
      currentDate: new Date(),
      centerDialogVisible: false,
      imageUrl: '',
      dialogVisible: false,
      product: {
        id: '',
        shopname: '',
        shopimg: '',
        shoptext: '',
        price: null,
        quantity: null,

      },
      rules: {
        shopname: [
          {required: true, message: '商品名称不能为空', trigger: 'blur'}
        ],
        shopimg: [
          {required: true, message: '请上传商品图片', trigger: 'change'}
        ],
        shoptext: [
          {required: true, message: '商品简介不能为空', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '商品价格不能为空', trigger: 'blur'}
        ],
        quantity: [
          {required: true, message: '商品数量不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  components: {},
  mounted() {
    this.scl = ["海口校区", "旗山校区", "仓山校区"]
    this.fetchProducts()
    //登录后判断完后的用户身份
    this.role = this.$store.state.role
  },
  methods: {
    //打开商品详情页
    showModal(str) {
      //将js对象转化为json格式字符串传输
      var string = JSON.stringify(str)
      this.$router.push({path: '/shopdetail', query: {string}})
    },
    //打开驳回表单
    opendismissal() {
      this.showForm = true
    },
    //关闭驳回
    closedismissal() {
      this.showForm = false
    },
    //审批不通过并写明理由方法
    overruleshop(data) {
      let formData = new FormData();
      formData.append('remark', data.remark)
      formData.append('id', data.id)
      putshopdismissal(formData).then(res => {
        if (res.code === 200) {
          this.$message.success("驳回成功！")
        }
      })
    },
    //审批通过商品方法
    passshop(data) {
      let data02 = data.id
      putshoppass(data02).then(res => {
        if (res.code === 200) {
          this.$message.success("审批成功！")
        }
      })
    },
    // 查询待审批商品
    getapproveshop() {
      getapproveshop().then(res => {
        if (res.code === 200) {
          this.goodsList = res.data
          // 获取当前页的数据
          for (let i = 0; i < res.data.length; i++) {
            //替换展示照片
            // let imgurl = "http://192.168.10.100:8080/home/picture/" +this.goodsList[i].shopimg
            let imgurl = "http://111.229.186.198:8080/home/picture/" + this.goodsList[i].shopimg
            this.goodsList.splice(i, 1, {...this.goodsList[i], shopimg: imgurl});
          }
        } else {
          this.$message.error("查询失败！")
        }
      })
    },
    //根据用户角色展示审批商品的弹窗
    Approvebutton() {
      this.dialogVisible02 = true
      this.getapproveshop()
    },
    //刷新商品
    Refreshtheitem() {
      this.fetchProducts()
    },
    //修改校区
    searchByCampus(cuet) {
      this.xiaoqu = cuet
      this.search()
    },
    //修改学院
    searchByAcademy(cuet) {
      this.xueyuan = cuet
      this.search()
    },
    //搜索框
    search() {
      //后端模糊查询
      search(this.currentpage, this.pagesize, this.keyword, this.xueyuan, this.xiaoqu).then(res => {
        if (res.succeed === true) {
          this.ticket = []
          this.ticket = res.records
          this.total = res.totalElements
          this.numberOfElements = res.numberOfElements
          //获取当前页的数据
          this.getPageInfo();       //在这里调用获取当前页的数据信息方法
          this.$message({
            message: '数据加载成功!',
            type: 'success',
            offset: 60
          });
        } else {
          // 失败的提示
          this.$message.error(res.succeed);
        }
      })
          .catch(function (err) {
            console.log(err);
          })
      // 进行搜索
      console.log('搜索关键字：', this.keyword);
    },

    //投诉商品
    putitemstatus(id) {

      this.$message.success("投诉成功")
    },

    editbutton(data) {
      //封装json字符串
      var result = {}
      result["userId"] = this.$store.state.user.id
      result["shopId"] = data.id
      var json = JSON.stringify(result);


      addCollection(json).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            offset: 80
          });
        } else {
          this.$message({
            message: res.msg + '收藏失败',
            type: 'error',
            offset: 30
          });
        }
      })

    },

    //获取数据
    fetchProducts() {
      getshop(this.currentpage, this.pagesize).then(res => {
        if (res.succeed === true) {
          this.ticket = []
          this.ticket = res.records
          this.total = res.totalElements
          this.numberOfElements = res.numberOfElements
          //获取当前页的数据
          this.getPageInfo();       //在这里调用获取当前页的数据信息方法
          this.$message({
            message: '数据加载成功!',
            type: 'success',
            offset: 60
          });
        } else {
          // 失败的提示
          this.$message.error(res.succeed);
        }
      })
          .catch(function (err) {
            console.log(err);
          })
    },

    // 获取当前页的数据信息
    getPageInfo() {
      //清空pageTicket中的数据
      this.pageTicket = [];
      // console.log(this.currentpage)
      // 获取当前页的数据
      for (let i = 0; i < this.numberOfElements; i++) {
        //把遍历的数据添加到pageTicket里面
        this.pageTicket.push(this.ticket[i]);
        // let imgurl = "http://192.168.10.100:8080/home/picture/" + this.pageTicket[i].shopimg
        // let imgurl02 = "http://192.168.10.100:8080/home/picture/" + this.pageTicket[i].shopimg02
        // let imgurl03 = "http://192.168.10.100:8080/home/picture/" + this.pageTicket[i].shopimg03
        let imgurl = "http://111.229.186.198:8080/home/picture/" + this.pageTicket[i].shopimg
        let imgurl02 = "http://111.229.186.198:8080/home/picture/" + this.pageTicket[i].shopimg02
        let imgurl03 = "http://111.229.186.198:8080/home/picture/" + this.pageTicket[i].shopimg03
        //替换照片为64base格式的，用来展示
        this.pageTicket.splice(i, 1, {...this.pageTicket[i], shopimg: imgurl});
        this.pageTicket.splice(i, 1, {...this.pageTicket[i], shopimg02: imgurl02});
        this.pageTicket.splice(i, 1, {...this.pageTicket[i], shopimg03: imgurl03});
        // console.log(this.pageTicket[i])
        // this.imgurl= window.URL.createObjectURL(this.pageTicket[i].shopimg)
        //判断是否达到一页的要求
        if (this.pageTicket.length === this.pagesize) break;
      }
      //存储完之后，打乱数组用来更新
      this.pageTicket.sort(() => Math.random() - 0.5);
    },
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.pagesize = size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.currentpage = pageNumber;
      //数据重新分页
      this.fetchProducts()
    },
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  float: left;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.square-img {
  width: 114.66px;
  height: 100px;
  overflow: hidden;
}

.bottomclearfix {

}
</style>
